
<template>
  <div>
    <el-container
      style="
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
      "
    >
      <!-- 头部布局 -->
      <el-header
        class="d-flex align-items-center"
        style="background: #545c64; color: #fff"
      >
        <i
          class="fz20 m-r-5 pointer"
          :class="!isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
          @click="handleCollapse"
        ></i
        >Welcome Home!
      </el-header>
      <el-container style="height: 100%">
        <!-- 侧边布局 -->
        <el-aside :width="isCollapse ? 'auto' : '200px'">
          <el-menu
            :default-active="1"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            style="height: 100%"
          >
            <el-menu-item
              v-for="(item, index) in menuList"
              :key="index"
              :index="item.id"
              @click="handleJumpUrl(item)"
            >
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主布局 -->
        <el-main
          class="bg-light position-relative"
          style="padding-bottom: 60px"
        >
          <router-view></router-view>

          <!-- 返回顶部 -->
          <el-backtop target=".el-main" :bottom="100">
            <div
              style="
                 {
                  height: 100%;
                  width: 100%;
                  background-color: #f2f5f6;
                  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
                  text-align: center;
                  line-height: 40px;
                  color: #1989fa;
                }
              "
            >
              UP
            </div>
          </el-backtop>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "layout",
  provide() {
    return {
      layout: this,
    };
  },
  data() {
    return {
      menuList: [
        {
          id: 1,
          title: "jsplumb案例",
          path: "/jsplumb",
          name: "jsplumb",
          icon: "el-icon-attract",
        },
        {
          id: 2,
          title: "mxgraph例子",
          path: "/mxgraph",
          name: "mxgraph",
          icon: "el-icon-mobile",
        },
        {
          id: 3,
          title: "工作流程案例",
          path: "/workFlow",
          name: "workFlow",
          icon: "el-icon-scissors",
        },
        {
          id: 4,
          title: "表输入案例",
          path: "/tableInput",
          name: "tableInput",
          icon: "el-icon-umbrella",
        },
        {
          id: 5,
          title: "封装表格组件",
          path: "/freeTable",
          name: "freeTable",
          icon: "el-icon-headset",
        },
        {
          id: 6,
          title: "表单自动渲染",
          path: "/formAutoRender",
          name: "formAutoRender",
          icon: "el-icon-brush",
        },
        {
          id: 7,
          title: "数据血缘组件",
          path: "",
          name: "",
          icon: "el-icon-mouse",
        },
      ],
      isCollapse: false,
    };
  },
  watch: {
    $route(to, from) {},
  },
  computed: {},
  created() {},
  methods: {
    handleJumpUrl(item) {
      let { name } = item;
      console.log(111);
      console.log(name);
      this.$router.push({
        name,
      });
    },
    handleCollapse() {
      this.isCollapse = !this.isCollapse;
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-menu {
  border-right: none;
}
.fz20 {
  font-size: 20px;
}
</style>